<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var commentId;
            var goodId;
            var collectId;
            // 获得酒店id
            var id = getParams().id;
            console.log(id);
            if (id) {
                // 发送ajax请求
                $.get("/hotels/" + id, function (data) {
                    console.log(data);
                    hotelCommentId = data.commentId;
                    goodId = data.goodId;
                    collectId = data.collectId;

                    // 检查用户是否点赞
                    checkAddGood(user, goodId);

                    // 渲染点赞数量
                    getCount(goodId);

                    // 检查用户是否收藏
                    checkAddCollect(user, collectId);

                    // 渲染收藏数量
                    getCollectCount(collectId);

                    // 回显游记信息
                    $(".travels").renderValues(data,{
                        handle:function (ele, value) {
                            $("#btn_order").prop("href","/hotelOrder.html?id="+value);
                        }});
                })
            }

            $("#likeBtn").click(function () {
                if (user) {
                    // 检查用户是否可以点赞
                    $.get("/users/" + user.id + "/addGoods/" + goodId, function (data) {
                        if (data.success) {
                            $.post("/addGoods/" + goodId, function (data) {
                                if (data.success) {
                                    $("#likeState").html("已点赞");
                                    // 渲染点赞数量
                                    getCount(goodId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addGoods/" + goodId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#likeState").html("点赞");
                                    // 渲染点赞数量
                                    getCount(goodId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type: "confirm",
                        style: "ros",
                        titleShow: false,
                        closeBtnShow: true,
                        content: "登录后才可以进行点赞",
                        buttons: [
                            {
                                name: "跳转到登陆界面",
                                callback: function () {
                                    location.href = "/login.html";
                                }
                            },
                            {
                                name: "取消",
                                callback: function () {
                                }
                            }
                        ]
                    });
                }
            });

            $("#collectBtn").click(function () {
                if (user) {
                    // 检查用户是否可以收藏
                    $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                        if (data.success) {
                            $.post("/addCollects/" + collectId, function (data) {
                                if (data.success) {
                                    $("#collectState").html("已收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            });
                        } else {
                            $.ajax({
                                url: "/addCollects/" + collectId,
                                type: "DELETE",
                                success: function (data) {
                                    $("#collectState").html("收藏");
                                    // 渲染收藏数量
                                    getCollectCount(collectId);
                                }
                            })
                        }
                    });
                } else {
                    // 跳转到登录界面
                    $(document).dialog({
                        type:"confirm",
                        style:"ros",
                        titleShow:false,
                        closeBtnShow: true,
                        content:"登录后才可以进行收藏",
                        buttons:[
                            {
                                name:"跳转到登陆界面",
                                callback:function () {
                                    location.href="/login.html";
                                }
                            },
                            {
                                name:"取消",
                                callback:function () {
                                }
                            }
                        ]
                    });
                }
            });


            // 点击看评论按钮跳转到评论页面
            var hotelCommentId;
            $("#commentBtn").click(function () {
                location.href = "/comment.html?id=" + hotelCommentId;
            })
        });

        // 检查用户是否点赞
        function checkAddGood(user, travelGoodId) {
            // 点赞: 判断当前用户是否登录, 登录可点赞, 没登录不可以
            if (user){
                // 检查用户是否已经点赞
                $.get("/users/" + user.id + "/addGoods/" + travelGoodId, function (data) {
                    if (data.success) {
                        $("#likeState").html("点赞");
                    } else {
                        $("#likeState").html("已点赞");
                    }
                });
            }
        }

        // 获取当前内容点赞数量
        function getCount(goodId) {
            $.get("/addGoods/" + goodId + "/counts", function (data) {
                // 显示点赞数量
                $("#likeCount").html(data);
            });
        }

        // 检查用户是否收藏
        function checkAddCollect(user, collectId) {
            // 点赞: 判断当前用户是否登录, 登录可收藏, 没登录不可以
            if (user){
                // 检查用户是否已经收藏
                $.get("/users/" + user.id + "/addCollects/" + collectId, function (data) {
                    if (data.success) {
                        $("#collectState").html("收藏");
                    } else {
                        $("#collectState").html("已收藏");
                    }
                });
            }
        }

        // 获取当前内容收藏数量
        function getCollectCount(collectId) {
            $.get("/addCollects/" + collectId + "/counts", function (data) {
                // 显示收藏数量
                $("#collectCount").html(data);
            });
        }
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels" >
    <div class="col" style="background-color:greenyellow"    >
        <a  id="btn_order"  render-key="id" render-fun="handle"  >
           <h3> <span>预定</span></h3>
        </a>
    </div>
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="name"></h6>
        <!--<small>
            <span render-html="releaseTime"></span>
            浏览 <span> 3120万+</span>
            回复 <span> 6600万+</span>
        </small>-->
        <div class="row">
            <div class="col-lg-6 img">
                <h6 class="title" render-html="title"></h6>
            </div>
            <!--<div class="col-4 en-title"><span>Saint  tropez Hotel</span>
            </div>-->
            <div class="col-lg-6">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>

    <div class="container">
        <fieldset>
            <legend>酒店信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-universal-access"></i> 会员价格 <span render-html="vipPrice"></span>
                </div>
                <div class="p-2  flex-fill">
                    <i class="fa fa-university"></i> 普通价格
                    <span render-html="pubPrice"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 点赞数
                    <span render-html="good"></span>
                </div>
            </div>
        </fieldset>

        <!--游记的内容-->
        <div class="content" render-html="hotelContent.content">
        </div>
    </div>

    <hr>
    <div class="container d-flex" >
        <div class="p-2  flex-fill" id="commentBtn"><i class="fa  fa-commenting-o"  > </i>
            看评论
        </div>
        <div class="p-2  flex-fill" id="likeBtn">
            <i class="fa fa-thumbs-o-up"   disabled="true"> </i>
            <span id="likeState">点赞
            </span>
            (<span id="likeCount"></span>)
        </div>
        <div class="p-2  flex-fill" id="collectBtn"><i class="fa fa-star-o" > </i>
            <span id="collectState">
            收藏
            </span>
            (<span id="collectCount"></span>)
        </div>
    </div>
</div>

</body>
</html>